
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<script type="text/javascript" src="./assets/js/jquery-3.1.1.min.js"></script>
	<title> 页面名称 </title>
<style type="text/css">
#box {
	position: relative;
	width: 500px;
	height: 500px;
	border: 1px solid #999;
}
#box div {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0px;
	left: 0px;
	background-color: #f00;
	transition: all 1500ms;
}
</style>
</head>
<body>

<div id="box">
	<div class="qp"></div>
	<div class="qp"></div>
</div>
<script type="text/javascript">

var div = document.getElementById("box").getElementsByTagName("div");
console.log(div)
setInterval(function(){
	for (var i = 0; i < div.length; i++) {
		div[i].style.left = Math.floor(Math.random()*600)+"px";
		div[i].style.top = Math.floor(Math.random()*400)+"px";
	}
}, 2000);

$(function () {
	// var div = $('#box div')
	// var div = $('.qp')
	// console.log(div)
	function move() {
		var randomMove = Math.floor(Math.random() * 300) + 'px'
		for (var i = 0; i < div.length; i++) {
			console.log(div[i])
			// div[i].css({'left': randomMove})
			// div[i].css({'top': randomMove})
		}
	}
	// move()
	// setInterval(move, 1000)
})
</script>
</body>
</html>